<template>
  <xy-page>
    <div class="consumption">
      <el-select v-model="appId" placeholder="请选择" @change="changePage(1)" v-show="showSelect">
        <el-option
          v-for="item in appList"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-tabs v-model="activeName">
        <el-tab-pane label="消费总览" name="1">
          <div v-if="appId != ''" class="amount-data">
            <span>账号ID</span><el-input v-model="appId" class="w200 mgl20" disabled></el-input>
            <span class="mgl100">累计观看分钟数</span><el-input v-model="amount" class="w200 mgl20" disabled></el-input>
            <el-button class="fr">导出数据</el-button>
          </div>
          <div v-else class="amount-data">
            <span>平台累计观看分钟数</span><el-input v-model="amount" class="w200 mgl20" disabled></el-input>
            <el-button class="fr" @click="output">导出数据</el-button>
          </div>
        </el-tab-pane>
        
        <xy-table :tableData="tableData" :loading="tableData.isloading" @change="changePage">
          <el-table-column
            prop="month"
            label="时间"
            min-width="180">
          </el-table-column>
          <el-table-column
            prop="concurrences"
            label="最高并发"
            min-width="180">
          </el-table-column>
          <el-table-column
            prop="durations"
            label="观看分钟数"
            min-width="180">
          </el-table-column>
        </xy-table>
      </el-tabs>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() { 
    return {
      appId: '',
      appList: [], 
      showSelect: false, // 是否显示应用选择

      activeName:'1',
      amount:'', // 累计观看分钟数
      
      tableData: {
        isloading: false,
        page: 1,
        size: 10,
        total: 0,
        list: []
      }
    }
  },
  methods:{
    getApplist(){
      this.$postStream('/admin/instance/ccb/polyv/app/list.do', {
        data: {
          page: 1,
          displayRecord: 65535
        },
        success: (res) => {
          this.appList = [{ value: '', label: '所有应用' }]
          if(res.object.list && res.object.list.length > 0){
            res.object.list.forEach(element => {
              this.appList.push({
                value: element.devAppId,
                label: element.name
              })
            })
            this.changePage(1)
          }
        }
      })
    },
    changePage(page){
      if(this.appId == ''){
        this.getDataALL(page)
      }else{
        this.getData(page)
      }
    },
    // 所有应用的消费
    getDataALL(page){
      this.tableData.isloading = true
      this.$postStream('/admin/instance/ccb/polyv/app/view/appBillingSummary.do',{
        data: {
          page: page || 1,
          pageSize: 10
        },
        success: res => {
          if(res.success){
            this.amount = res.object.totalDuration
            this.tableData.list = res.object.list.contents
            this.tableData.page = res.object.list.pageNumber
            this.tableData.total = res.object.list.totalItems
          }
        },
        complete: () => {
          this.tableData.isloading = false
        }
      })
    },
    // 某个应用的消费
    getData(page){
      this.tableData.isloading = true
      this.$postStream('/admin/instance/ccb/polyv/app/view/userBillingSummary.do',{
        data: {
          appId: this.appId,
          page: page || 1,
          pageSize: 10
        },
        success: res => {
          if(res.success){
            this.amount = res.object.totalDuration
            this.tableData.list = res.object.list.contents
            this.tableData.page = res.object.list.pageNumber
            this.tableData.total = res.object.list.totalItems
          }
        },
        complete: () => {
          this.tableData.isloading = false
        }
      })
    },
    // 导出数据
    output(){
      if(this.tableData.list.length < 1){
        this.$message.warning('没有内容可以导出')
        return
      }
      if(this.appId == ''){
        // 导出所有应用的
        let url = '/admin/instance/ccb/polyv/app/view/appBillingSummary/export.do?page=1&pageSize=65535&sessionKey=' + JSON.parse(sessionStorage.getItem('UserInfo')).sessionKey
        this.$utils.linkTo(url)
      }else{
        // 导出单个应用的
        let url = '/admin/instance/ccb/polyv/app/view/userBillingSummary/export.do?appId=' + this.appId + '&page=1&pageSize=65535&sessionKey=' + JSON.parse(sessionStorage.getItem('UserInfo')).sessionKey
        this.$utils.linkTo(url)
      }
    }
  },
  mounted(){
    this.userType = sessionStorage.getItem('userType')
    if(this.userType == 3){
      // 平台管理员
      this.showSelect = true
      this.appId = this.$route.query.appId || ''
      this.getApplist()
    }else{
      this.appId = this.$route.query.appId || sessionStorage.getItem('appId') || ''
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
  .amount-data{
    margin-bottom: 20px;
  }
</style>

<style lang="scss">
  .el-select-dropdown{
    width: 200px;
  }
</style>
